<template>
  <div class="about">
    <div class="left" :style="{ width: num + 15 + 'px' }"></div>
    <div class="right"></div>
    <span class="drag" v-drag="num"></span>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup(props) {
    const num = ref(130);
    return {
      num,
    };
  },
  directives: {
    drag: {
      mounted(el, binding) {
        // console.log(el.offsetLeft);
        el.style.left = binding.value + "px";
        let x = 0; // 鼠标按下的点，到盒子边框的距离
        // let y = 0;
        el.onmousedown = function (e) {
          // console.log(e);
          x = e.screenX - el.offsetLeft;
          document.onmousemove = function (event) {
            el.style.left = event.screenX - x + "px";
            binding.instance.num = event.screenX - x;
          };
        };
        el.onmouseup = function () {
          document.onmousemove = null;
        };
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100vh;
  display: flex;
  .left {
    width: 200px;
    background: skyblue;
  }
  .right {
    flex: 1;
    background: greenyellow;
  }
  .drag {
    position: fixed;
    width: 30px;
    height: 50px;
    z-index: 99;
    background: red;
    top: calc(50% - 25px);
    cursor: pointer;
  }
}
</style>
